<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      ref="listRef"
      v-model:loading="loading"
      :finished="finished"
      finished-text="~没有更多了~没有更多了~没有更多了~没有更多了~"
      @load="onLoad"
    >
      <van-cell v-for="(item, index) in list" :key="item">
        <div class="bt822a">
          <span>{{ index + 1 + "<<<--->>>" + item }}</span>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref } from "vue";

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const listRef = ref(null);

const triggerLoad = () => {
  listRef.value.check(); // 手动触发滚动位置检查
};

const onLoad = () => {
  console.log("触发onLoad()加载事件...");
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // if (list.value.length >= 40) {
    //   finished.value = true;
    // }
    finished.value = true;
    loading.value = false;
  }, 2000);
};

const onRefresh = () => {
  console.log("触发onRefresh()加载事件...");
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>

<style scoped>
.bt822a {
  width: 100%;
  height: 40px;
  background-color: cadetblue;
  color: black;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
